<script setup lang="ts">

</script>

<template>
  <p>命名视图</p>
  <div class="box">
    <router-view class="item-1" name="left" />
    <router-view class="item-2"  />
    <router-view class="item-3" name="right" />
  </div>
</template>

<style scoped>
.box{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1rem;
}
.item-1{
  flex-basis: 200px;
  flex-grow: 0;
}
.item-2{
  flex-grow: 1;
}
.item-3{
  flex-grow: 2;
}
.item-1,.item-2,.item-3{
  padding: 10px;
  border-radius: 5px;
  border: 1px solid rgba(191, 191, 191, 0);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
</style>
